<template>
	<view class="content">
		<tn-navbar fixed :bottom-shadow="false">
			{{props.name}}
			<template #back v-if="props.showLeft"></template>
		</tn-navbar>
		<scroll-view scroll-y="true" :style="{ height: topSafeDistance, paddingBottom: bottomSafeDistance}">
			<slot></slot>
			<!-- 占位元素 -->
			<view class="placeholder"></view>
		</scroll-view>
		<!-- 底部 -->
		<tn-tabbar v-model="currentTabbar" fixed switch-animation @change="changeTabbar" :placeholder="false">
			<tn-tabbar-item v-for="(item, index) in tabbarData" :key="index" :icon="item.icon"
				:active-icon="item.activeIcon" :text="item.name" :bulge="index === 1" />
		</tn-tabbar>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue'
	const props = defineProps({
		currentTabbar: {
			type: Number,
			required: true
		},
		name: {
			type: String,
			required: true
		},
		showLeft: {
			type: Boolean,
			default: true
		}
	})
	const emit = defineEmits(['update:currentTabbar'])
	const currentTabbar = ref(props.currentTabbar)
	const tabbarData = reactive([
		{
			name: '首页',
			icon: 'home',
			activeIcon: 'home-fill',
		},
		{
			name: '工作台',
			icon: 'menu-alone',
			activeIcon: 'menu-alone-fill',
		},
		{
			name: '我的',
			icon: 'my-circle',
			activeIcon: 'my-circle-fill',
		}
	])
	const topSafeDistance = ref('')
	const bottomSafeDistance = ref('')
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		let top = systemInfo.safeAreaInsets.top;
		let bottom = systemInfo.safeAreaInsets.bottom;
		topSafeDistance.value = `calc(100vh - ${top + bottom + 45}px)`;
		bottomSafeDistance.value = `${bottom}px`;
	})
	watch(
		() => props.currentTabbar,
		(newValue) => {
			currentTabbar.value = newValue
		}
	)
	// 切换导航栏
	const changeTabbar = (item : any) => {
		emit('update:currentTabbar', item)
		if (item === 0) {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		} else if (item === 1) {
			uni.reLaunch({
				url: '/pages/worktop/worktop'
			})
		} else if (item === 2) {
			uni.reLaunch({
				url: '/pages/user/user'
			})
		}
	}
</script>

<style scoped lang="scss">
	.placeholder {
		padding: 25px 0;
	}
</style>